<template>
	<view class="sigin-container">
		<view class="tabs  py-4 flex justify-between">
			<view class="item flex justify-center" v-for="(item,index) in tabsList" @click="changeTab(index)">
				<view class="text" :class="{'active-text':index == tabIndex}">
					{{item.name}}
				</view>
			</view>
		</view>

		<view class="swiperBox mt-2">
			<swiper class="swiper p-3" circular :current="tabIndex" @change="chagneSwiper">
				<swiper-item v-for="item in 3" style="overflow-y: auto;">
					<LeftRight :data='signList' @ToDetail="ToSingin" style="height:calc(100vh - 800rpx);">
						<template #bottom="{item,index}">
							<!-- <view class="time-box px-1">
								<view class="item flex justify-between">
									<view class="">
										活动开始时间：
									</view>
									<view class="">
										{{item.beginTime}}
									</view>
								</view>

								<view class="item flex justify-between">
									<view class="">
										活动结束时间：
									</view>
									<view class="">
										{{item.endTime}}
									</view>
								</view>
							</view> -->
							<view v-if="tabIndex == 0" class="btn waitingSigned text-center" @click="goToSign(item)">
								<view class="text" :class="{'notCanSignin':!item.isCanSignin}">
									去签到
								</view>

								<view class="time">
									<view class="" v-if="deadlineDate(item.beginTime,index,'start')" >
									
										距离签到时间还有{{ deadlineDate(item.beginTime,index,'start') }}
									</view>
									<view class="">
										距离签到截止还剩{{ deadlineDate(item.endTime,index,'end') }}
									</view>

								</view>
							</view>

							<view v-if="tabIndex == 1"
								class=" mt-2 btn notSigned px-4 flex align-center justify-between">
								<view class="time">
									签到时间：{{item.signInTime }}
								</view>

								<view class="text " :class="{'red':tabIndex == 2}">
									{{tabIndex == 1 ? '已签到' : '未签到'}}
								</view>
							</view>

							<view v-if="tabIndex == 2"
								class=" mt-2 btn notSigned px-4 flex align-center justify-center">
								<view class="text red font-md">
									未签到
								</view>
							</view>
						</template>
					</LeftRight>
				</swiper-item>

			</swiper>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted
	} from 'vue'
	import {
		onShow
	} from "@dcloudio/uni-app"
	import LeftRight from '../../component/commonLayout/LeftRight.vue'
	import request from '../../api/index.js'
	const tabsList = ref([{
			name: '待签到'
		},
		{
			name: '已签到'
		},
		{
			name: '报名未签'
		}
	])


	const tabIndex = ref(0)

	const signList = ref([])

	const itemData = ref({})



	const limitTime = ref('')


	const changeTab = (index) => {

		tabIndex.value = index
	}


	const deadlineDate = (time, index, type) => {
		console.log("index---------", index)

		// 获取当前时间的时间戳
		const now = new Date();
		const end = new Date(time).getTime();





		// 计算剩余时间
		const diff = end - now;

		let days, hours, minutes, limitDate

		// 判断是否可以签到
		let isCanSignin = false;
		if (diff > 0) {
			// 计算天数、小时数和分钟数
			days = Math.floor(diff / (1000 * 60 * 60 * 24));
			hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
			minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));

			console.log("diff============================================", diff)




		} else {
			// signList.value[index].isCanSignin = true

		}

		if (type == 'start') {
			limitDate = Number(limitTime.value) * 60 * 1000
			console.log("limitDate============================================", limitDate)
			if (diff < limitDate) {
				console.log("可签到===========")
				signList.value[index].isCanSignin = true


			} else {
				console.log("不可签到===========")
				signList.value[index].isCanSignin = false

			}
		}






		// 构造结果字符串
		let result;
		if (diff > 0) {
			if (days > 0) {
				result = `${days}天${hours}时${minutes}分`;
			} else {
				if (type == 'start') {
					minutes = minutes - 30
				}
				result = `${hours}时${minutes}分`;
			}

		} else {
			result = '';
		}
		
		if(minutes <= 0){
			result = ''
		}
		return result;



	};




	const chagneSwiper = (e) => {
		console.log("e------", e);
		const current = e.detail.current;

		let type = 1;
		console.log("current---------", current)
		current == 0 ? type = '1,2,3' : current == 1 ? type = 4 : current == 2 ? type = 5 : ''
		if (current == 0) {
			gitSignList(type, '1,2')
		} else {
			gitSignList(type)
		}

		tabIndex.value = e.detail.current
	}

	const siginTimeLimit = () => {
		request({
			url: '/api/volunteer/system-config/page',
			method: 'GET',
			data: {
				formName: 'SystemConfig',
				keyword: 'activity_start_signin',
			}
		}, e => {
			if (e.success) {
				console.log('e-------------', e.data.records)
				limitTime.value = e.data?.records[0]?.textValue

			} else {
				uni.showToast({
					title: e.errorMessage,
					icon: 'none'
				})
			}
		})
	}

	const ToSingin = (item) => {
		console.log("item=====", item);
		itemData.value = JSON.stringify(item)

	}

	const goToSign = (item) => {
		if (!item.isCanSignin) {
			uni.showToast({
				title: `活动开始前${limitTime.value}分钟才可签到`,
				icon: 'error'
			})
			return
		}
		setTimeout(() => {

			uni.navigateTo({
				url: `/pages/signin/signin?data=${itemData.value}`
			})
		}, 20)

	}

	const gitSignList = (status, activityStatus = '') => {
		let url = ' ';
		if (activityStatus) {
			url = `/api/volunteer/activity/SelectActivityByUser?activityStatus=${activityStatus}`
		} else {
			url = '/api/volunteer/activity/SelectActivityByUser'
		}

		request({
			url: url,
			method: 'GET',
			data: {
				status: status,

			}
		}, e => {
			if (e.success) {
				console.log('e-------------', e.data.records)
				signList.value = e.data.records
				signList.value.forEach((item) => {
					item.responsibleimg = JSON.parse(item.responsibleimg)
					console.log('item.responsibleimg-------------', item.responsibleimg)
				})
			} else {
				uni.showToast({
					title: '获取请假列表信息失败',
					icon: 'none'
				})
			}
		})
	}
	onShow(() => {
		siginTimeLimit()
		gitSignList('1,2,3', '1,2')
	})
	onMounted(() => {



	})
</script>

<style lang="scss" scoped>
	.tabs {
		border-bottom: 1rpx solid #E9E9E9;

		.item {
			width: 33%;

			.active-text {
				color: #505fff;
			}

		}
	}

	.swiperBox {
		width: 100%;
		height: calc(100vh - 150rpx);
		overflow-y: auto !important;
		

		

		.btn {
			width: 100%;
			min-height: 100rpx;
			padding-top: 10rpx;
			padding-bottom: 10rpx;
			box-sizing: border-box;
			border-radius: 16rpx;
			background-color: #EFECFA;

			.text {
				// font-size: 28rpx;
				color: #505FFF;
				font-weight: bold;
			}

			.notCanSignin {
				color: #999;
			}

			.time {
				margin-top: 4rpx;
				font-size: 24rpx;
				color: #999;
			}
		}


		.notSigned {
			font-size: 24rpx;
			font-weight: normal;
			text-align: center;

			.red {
				color: #FE0000;


			}
		}


	}

	.swiper {
		height: 100%;

	}
</style>